<template>
  <div>
    <div class="m-footer">
      <div class="footerWrap">
        <p class="about">联系我们</p>
        <ul class="clearfix">
          <li class="phone">86-574-63023000</li>
          <li class="mail">trade@xinhaigroup.com</li>
          <li class="address">中国湖南省长沙市区三环东路239号</li>
        </ul>
        <div class="copyright">
          <p>币万网版权所有 Copyright © 2012-2018 biwan.com</p>
        </div>
      </div>
    </div>


    <div class="m-fixed-msg">
      <a @click="show">
        <div class="box">
          <span class="s"><i></i></span>
          <span class="t">消息</span>
        </div>
      </a>

      <div class="m-msgtab" v-show="showMsg">
        <div class="hd">
          <ul>
            <li :class="{'focus':1==cannel}">
              <a @click="showCannel(1)">评论</a>
            </li>
            <li :class="{'focus':2==cannel}">
              <a @click="showCannel(2)">赞</a>
            </li>
            <li :class="{'focus':3==cannel}">
              <a @click="showCannel(3)">私信</a>
            </li>
            <li :class="{'focus':4==cannel}">
              <a @click="showCannel(4)">系统消息</a>
              <span class="num">99</span>
            </li>
          </ul>
        </div>
        <div class="bd">

          <!--切换模块 评论 -->
          <div class="cannel" v-show="1==cannel">
            <ul class="m-list">
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="time">2018-03-23</i></p>
                  <p class="txt2">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="time">2018-03-23</i></p>
                  <p class="txt2">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="time">2018-03-23</i></p>
                  <p class="txt2">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="time">2018-03-23</i></p>
                  <p class="txt2">
                    小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="time">2018-03-23</i></p>
                  <p class="txt2">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="time">2018-03-23</i></p>
                  <p class="txt2">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
            </ul>
          </div>

          <!--切换模块 赞 -->
          <div class="cannel" v-show="2==cannel">
            <ul class="m-list m-list-zan">
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="czan">为你点赞</i></p>
                  <p class="txt2">2018-03-23</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="czan">为你点赞</i></p>
                  <p class="txt2">2018-03-23</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="czan">为你点赞</i></p>
                  <p class="txt2">2018-03-23</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="czan">为你点赞</i></p>
                  <p class="txt2">2018-03-23</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="czan">为你点赞</i></p>
                  <p class="txt2">2018-03-23</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="czan">为你点赞</i></p>
                  <p class="txt2">2018-03-23</p>
                </div>
              </li>
            </ul>

          </div>

          <div class="cannel" v-show="3==cannel">
            <ul class="m-list">
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="time">2018-03-23</i></p>
                  <p class="txt2">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="time">2018-03-23</i></p>
                  <p class="txt2">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="time">2018-03-23</i></p>
                  <p class="txt2">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="time">2018-03-23</i></p>
                  <p class="txt2">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="time">2018-03-23</i></p>
                  <p class="txt2">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <span class="pic"><img src="../images/img01.png" width="36" height="36"/></span>
                  <p class="name">海鹚<i class="time">2018-03-23</i></p>
                  <p class="txt2">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
            </ul>

          </div>


          <!--切换模块 系统消息 -->
          <div class="cannel" v-show="4==cannel">
            <ul class="m-list m-list-msg">
              <li>
                <div class="btn">
                  <p class="name"><i class="time">2018-03-23</i></p>
                  <p class="txt">
                    小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <p class="name"><i class="time">2018-03-23</i></p>
                  <p class="txt">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <p class="name"><i class="time">2018-03-23</i></p>
                  <p class="txt">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <p class="name"><i class="time">2018-03-23</i></p>
                  <p class="txt">
                    小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <p class="name"><i class="time">2018-03-23</i></p>
                  <p class="txt">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
              <li>
                <div class="btn">
                  <p class="name"><i class="time">2018-03-23</i></p>
                  <p class="txt">小鹏汽车获首块互联网汽车小鹏汽车获首块互联网汽车小鹏汽车获首</p>
                </div>
              </li>
            </ul>

          </div>

        </div>
      </div>
    </div>


    <div class="m-fixed-gotop">
      <a href="#top" target="_self">
        <img src="../images/gotop.png" width="30" height="30"/>
      </a>
    </div>

    <!--二维码-->
    <div class="m-fixed-code">
        <span class="s">
            <img src="../images/share.jpeg" width="60" height="60"/>
        </span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "bottom",
    data() {
      return {
        showMsg: false,
        cannel: 1
      }
    }, mounted() {

    }, methods: {
      show() {
        this.showMsg = !this.showMsg
      }, showCannel(type) {
        this.cannel = type
        this.getSysMsgList(1)
        this.getSysMsgList(3)
        this.getSysMsgList(4)
        this.getSysMsgList(5)
      },
      getSysMsgList(type) {
        let params = {
          "condition": {"type": type},
          "current": 0,
          "pages": 0,
          "size": 0,
          "total": 0
        }
        this.$post('/userRef/getSysMsgList', params).then(response => {
          this.$check(response)
          console.log(response)
        })
      }
    }
  }
</script>

<style scoped>

</style>
